<template>
  <div class="app-container">
    <div style="width: 100%; height: 85vh" v-loading="loading">
      <mt-edit
        ref="MtEditRef"
        @on-return-click="onReturn"
        @on-save-click="onSave"
        @on-preview-click="onPreview"
      ></mt-edit>
    </div>
    <el-dialog v-model="dialogVisible" title="预览" fullscreen destroy-on-close>
      <mt-preview :export-json="export_json" ref="MtPreviewRef"></mt-preview>
    </el-dialog>
  </div>
</template>
<script setup name="maotuPage">
const export_json = ref({});
const MtEditRef = ref();
const MtPreviewRef = ref();
const dialogVisible = ref(false);
const { proxy } = getCurrentInstance();

const onReturn = () => {
  console.log("点击了返回按钮");
  router.go(-1);
};

const onPreview = (data_model) => {
  export_json.value = JSON.parse(JSON.stringify(data_model));
  dialogVisible.value = true;
};
const onSave = (data_model) => {
  console.log("点击了保存按钮，可以在此处将图存到数据库", data_model);
  entitySence.value.dataModel = JSON.stringify(data_model);
  submitForm();
};

import { MtEdit, MtPreview } from "maotu";
import "maotu/dist/style.css";

import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();

const entitySence = ref({});
import { onMounted } from "vue";
onMounted(() => {
  entitySence.value = {};
  if (route.query != null) {
    const response = route.query;
    getManagementScene(response.id).then((response) => {
      entitySence.value = response.data;
      getJsonInfo(response.data);
    });
  }
});

import {
  updateManagementScene,
  getManagementScene,
} from "@/api/ruoyi-device/managementScene";
import {
  JSONreflush,
  emptyIsTrue,
  emptyIsFalse,
  removeBracketsAndPipes,
} from "@/api/123wwwww/universalMethod";
/** 提交按钮 */
function submitForm() {
  updateManagementScene(entitySence.value).then((response) => {
    proxy.$modal.msgSuccess("修改成功");
    open.value = false;
  });
}

const loading = ref(true);
const getJsonInfo = (entity) => {
  console.log(entity.dataModel);
  if (emptyIsFalse(entity.dataModel)) {
    MtEditRef.value?.setImportJson(JSON.parse(entity.dataModel));
  } else {
    // 如果之前没存过数据 那么就传初始化数据 这样可以自己设置画布大小等配置
    MtEditRef.value?.setImportJson({
      canvasCfg: {
        width: 1920,
        height: 1080,
        scale: 1,
        color: "",
        img: "",
        guide: true,
        adsorp: true,
        adsorp_diff: 3,
        transform_origin: {
          x: 0,
          y: 0,
        },
        drag_offset: {
          x: 0,
          y: 0,
        },
      },
      gridCfg: {
        enabled: true,
        align: true,
        size: 10,
      },
      json: [],
    });
  }

  loading.value = false;
};
</script>
